<!--
    默认界面
-->
<template>
    <div class="homePage">
        <!--  顶部logo+菜单      -->
       <TopNav></TopNav>
        <!--   主体内容部分     -->
        <div class="banner">
            <h1 style="margin-bottom:30px;">Lucky UI</h1>
            <h2 style="margin-bottom:10px;">一个基于Vue3+TS开发的UI框架</h2>
            <p class="actions">
                <a class="btn-div" href="https://gitee.com/Rulyc/lucky-ui/tree/master/">码云</a>
                <!--     内部跳转使用router-link           -->
                <router-link to="/doc" class="btn-div">开始</router-link>
            </p>
        </div>
      <div class="features">
        <ul>
          <li>
            <div class="img-div">
              <img src="../assets/vue.svg" alt="">
            </div>
            <div>
              <h3>基于 Vue 3</h3>
              <p>使用了 Vue 3 Composition API</p>
            </div>
          </li>
          <li>
            <div class="img-div">
              <img src="../assets/tsx.svg" alt="">
            </div>
            <div>
              <h3>基于 TypeScript </h3>
              <p>源代码采用 TypeScript书写</p>
            </div>
          </li>
          <li>
            <div class="img-div">
              <img src="../assets/scss.svg" alt="">
            </div>
            <div>
              <h3>基于 Scss</h3>
              <p>样式部分采用Scss定制</p>
            </div>

          </li>
        </ul>
      </div>
    </div>
</template>

<script lang="ts">
    import TopNav from "../components/TopNav.vue";
    export default {
        name: "home",
        components: {TopNav}
    }
</script>

<style lang="scss" scoped>

    .homePage{

    }
    .banner {
      background: linear-gradient(145deg, #f0f9eb 0%, #c2e7b0 100%); // 渐变
      /*border-bottom-left-radius: 50% 40px;*/
      /*border-bottom-right-radius: 50% 40px;*/
      clip-path: ellipse(80% 60% at 50% 40%);
        color: #67C23A;
        padding: 100px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        > .actions{
            padding: 8px 0;
            a {
                margin:0 8px;
                background: #67C23A;
                color: #fff;
                border-radius: 4px;
                padding: 8px 24px;
                outline: none;
                &:hover{
                    color: #67C23A;;
                    background-color: #fff;
                    border: none;
                    text-decoration: none;
                }
            }
        }
    }
    .features {
      margin: 54px auto;
      padding: 0 16px;
      @media (min-width: 800px) {
        width: 800px;
        >ul {
          >li {
            width: 50%;
          }
        }
      }
      @media (min-width: 1200px) {
        width: 1200px;
        >ul {
          >li {
            width: 33.3333%;
          }
        }
      }
      >ul {
        display: flex;
        flex-wrap: wrap;
        >li {
          margin: 16px 0;
          display: grid;
          justify-content: start;
          align-content: space-between;
          grid-template-areas:
            "icon title"
            "icon text";
          grid-template-columns: 80px auto;
          grid-template-rows: 1fr auto;
         .img-div{
           >img  {
             width: 64px;
             height: 64px;
           }

         }
          >div {
            >h3 {
              padding-top:5px;
              grid-area: title;
              font-weight: bold;
              margin-bottom:8px;
            }
            >p {
              grid-area: text
            }
          }

        }
      }
    }

    /*.topnav{*/
    /*    !*background: url(../assets/img/bg.png)  no-repeat;*!*/
    /*    background-size: 100%;*/
    /*    border-bottom: none;*/
    /*    box-shadow: none;*/
    /*    transition: none;*/
    /*}*/

    /*.btn-div{*/
    /*    height: 30px;*/
    /*    border:none;*/
    /*    outlin:none;*/
    /*    display: inline-block;*/
    /*    text-align: center;*/
    /*    padding:10px 20px;*/
    /*}*/
</style>
